<template>
	<view class="search-container">
		<!-- 搜索头部 -->
		<view class="search-header bg-white">
			<view class="search-wrapper">
				<gui-search
					:kwd="keytext"
					@inputting="inputting"
					@confirm="confirm"
					placeholder="搜索新闻、公告、活动..."
				></gui-search>
			</view>
		</view>

		<!-- 搜索结果统计 -->
		<view class="search-stats" v-if="keytext && !isLoading">
			<text class="stats-text">为您找到 "{{ keytext }}" 相关结果</text>
		</view>

		<!-- 标签导航 -->
		<view class="nav-wrapper">
			<gui-switch-navigation
				:items="tabs"
				:size="150"
				:currentIndex="currentIndex"
				@change="navchange"
			></gui-switch-navigation>
		</view>

		<!-- 内容区域 -->
		<view class="content-wrapper">
			<swiper
				class="tab-swiper"
				:current="currentIndex"
				@change="swiperChange"
				:style="{ height: swiperHeight + 'px' }"
			>
				<!-- 新闻列表 -->
				<swiper-item class="swiper-item">
					<scroll-view
						class="scroll-content"
						scroll-y
						@scrolltolower="loadMore(0)"
						:refresher-enabled="true"
						:refresher-triggered="refreshing[0]"
						@refresherrefresh="onRefresh(0)"
					>
						<view class="list-container">
							<!-- 新闻项 -->
							<view
								v-for="(item, index) in tabs[0].list"
								:key="index"
								class="news-item"
								@click="goToDetail('news', item)"
							>
								<view class="item-content">
									<view class="item-title">{{ item.title }}</view>
									<view class="item-meta">

										<text class="meta-category" v-if="item.news_category ">{{ item.news_category.name }}</text>
                                        <text class="meta-time">{{ item.crt_time }}</text>
									</view>
									<view class="item-summary" v-if="item.summary">{{ item.summary }}</view>
								</view>
								<view class="item-arrow">
									<text class="arrow-icon">›</text>
								</view>
							</view>

							<!-- 加载状态 -->
							<view class="load-status">
								<view v-if="loadingMore[0]" class="loading-more">
									<text class="loading-text">加载中...</text>
								</view>
								<view v-else-if="noMoreData[0]" class="no-more">
									<text class="no-more-text">没有更多数据了</text>
								</view>
							</view>

							<!-- 空状态 -->
							<view v-if="!isLoading && tabs[0].list.length === 0" class="empty-state">
								<view class="empty-icon">📰</view>
								<text class="empty-text">暂无相关新闻</text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>

				<!-- 公告列表 -->
				<swiper-item class="swiper-item">
					<scroll-view
						class="scroll-content"
						scroll-y
						@scrolltolower="loadMore(1)"
						:refresher-enabled="true"
						:refresher-triggered="refreshing[1]"
						@refresherrefresh="onRefresh(1)"
					>
						<view class="list-container">
							<!-- 公告项 -->
							<view
								v-for="(item, index) in tabs[1].list"
								:key="index"
								class="news-item notice-item"
								@click="goToDetail('notice', item)"
							>
								<view class="item-content">
									<view class="item-title">{{ item.title }}</view>
									<view class="item-meta">
										<text class="meta-time">{{ formatTime(item.crt_time) }}</text>
									</view>
									<view class="item-summary" v-if="item.summary">{{ item.summary }}</view>
								</view>
								<view class="item-arrow">
									<text class="arrow-icon">›</text>
								</view>
							</view>

							<!-- 加载状态 -->
							<view class="load-status">
								<view v-if="loadingMore[1]" class="loading-more">
									<text class="loading-text">加载中...</text>
								</view>
								<view v-else-if="noMoreData[1]" class="no-more">
									<text class="no-more-text">没有更多数据了</text>
								</view>
							</view>

							<!-- 空状态 -->
							<view v-if="!isLoading && tabs[1].list.length === 0" class="empty-state">
								<view class="empty-icon">📢</view>
								<text class="empty-text">暂无相关公告</text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>

				<!-- 活动列表 -->
				<swiper-item class="swiper-item">
					<scroll-view
						class="scroll-content"
						scroll-y
						@scrolltolower="loadMore(2)"
						:refresher-enabled="true"
						:refresher-triggered="refreshing[2]"
						@refresherrefresh="onRefresh(2)"
					>
						<view class="list-container">
							<!-- 活动项 -->
							<view
								v-for="(item, index) in tabs[2].list"
								:key="index"
								class="news-item activity-item"
								@click="goToDetail('activity', item)"
							>
								<view class="item-content">
									<view class="item-title">{{ item.activity_name }}</view>
									<view class="item-meta">

                                        <text class="meta-category" v-if="item.category">{{ item.category.name }}</text>
                                        <text class="meta-time">{{ item.crt_time }}</text>
									</view>

								</view>
								<view class="item-arrow">
									<text class="arrow-icon">›</text>
								</view>
							</view>

							<!-- 加载状态 -->
							<view class="load-status">
								<view v-if="loadingMore[2]" class="loading-more">
									<text class="loading-text">加载中...</text>
								</view>
								<view v-else-if="noMoreData[2]" class="no-more">
									<text class="no-more-text">没有更多数据了</text>
								</view>
							</view>

							<!-- 空状态 -->
							<view v-if="!isLoading && tabs[2].list.length === 0" class="empty-state">
								<view class="empty-icon">🎉</view>
								<text class="empty-text">暂无相关活动</text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 全局加载状态 -->
		<view v-if="isLoading" class="global-loading">
			<view class="loading-spinner"></view>
			<text class="loading-text">搜索中...</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keytext: "",
				tabs: [{
						name: "新闻",
						list: [],
						page_index: 1
					},
					{
						name: "公告",
						list: [],
						page_index: 1
					},
					{
						name: "活动",
						list: [],
						page_index: 1
					}
				],
				currentIndex: 0,
				isLoading: false,
				loadingMore: [false, false, false], // 每个tab的加载更多状态
				noMoreData: [false, false, false], // 每个tab是否没有更多数据
				refreshing: [false, false, false], // 下拉刷新状态
				swiperHeight: 600 // swiper高度
			}
		},
		onLoad(opt) {
			this.keytext = opt.t || "";
			if (this.keytext) {
				this.confirm(this.keytext);
			}
			this.setSwiperHeight();
		},
		onReady() {
			this.setSwiperHeight();
		},
		methods: {
			// 输入搜索关键词
			inputting(value) {
				this.keytext = value;
			},

			// 确认搜索
			confirm(t) {
				if (!t || !t.trim()) {
					uni.showToast({
						title: '请输入搜索关键词',
						icon: 'none'
					});
					return;
				}

				this.keytext = t.trim();
				this.resetData();
				this.getData(this.keytext, 'all', 1);
			},

			// 重置数据
			resetData() {
				this.tabs.forEach((tab, index) => {
					tab.list = [];
					tab.page_index = 1;
					this.loadingMore[index] = false;
					this.noMoreData[index] = false;
					this.refreshing[index] = false;
				});
			},

			// 获取数据
			getData(t, type, page_index, isLoadMore = false) {
				if (!isLoadMore) {
					this.isLoading = true;
				}

				let self = this;
				this.$boya.NGet("/app/search", {
					"t": t,
					"type": type,
					"page": page_index
				}, function(res) {
					self.isLoading = false;

					// 重置加载更多状态
					self.loadingMore = [false, false, false];

					let data = res.data;

					if (type == "news") {
						if (isLoadMore) {
							self.tabs[0].list = self.tabs[0].list.concat(data.news_info || []);
						} else {
							self.tabs[0].list = data.news_info || [];
						}
						self.noMoreData[0] = !data.news_info || data.news_info.length === 0;
					} else if (type == "notice") {
						if (isLoadMore) {
							self.tabs[1].list = self.tabs[1].list.concat(data.notice_info || []);
						} else {
							self.tabs[1].list = data.notice_info || [];
						}
						self.noMoreData[1] = !data.notice_info || data.notice_info.length === 0;
					} else if (type == "activity") {
						if (isLoadMore) {
							self.tabs[2].list = self.tabs[2].list.concat(data.activity_online || []);
						} else {
							self.tabs[2].list = data.activity_online || [];
						}
						self.noMoreData[2] = !data.activity_online || data.activity_online.length === 0;
					} else {
						// 全部搜索
						self.tabs[0].list = data.news_info || [];
						self.tabs[1].list = data.notice_info || [];
						self.tabs[2].list = data.activity_online || [];

						self.noMoreData[0] = !data.news_info || data.news_info.length === 0;
						self.noMoreData[1] = !data.notice_info || data.notice_info.length === 0;
						self.noMoreData[2] = !data.activity_online || data.activity_online.length === 0;
					}
				}, function(error) {
					self.isLoading = false;
					self.loadingMore = [false, false, false];
					uni.showToast({
						title: '搜索失败，请重试',
						icon: 'none'
					});
				});
			},

			// 标签切换
			navchange(index) {
				this.currentIndex = index;
			},

			// swiper切换
			swiperChange(e) {
				this.currentIndex = e.detail.current;
			},

			// 加载更多
			loadMore(tabIndex) {
				if (this.loadingMore[tabIndex] || this.noMoreData[tabIndex]) {
					return;
				}

				this.loadingMore[tabIndex] = true;
				this.tabs[tabIndex].page_index++;

				const typeMap = ['news', 'notice', 'activity'];
				this.getData(this.keytext, typeMap[tabIndex], this.tabs[tabIndex].page_index, true);
			},

			// 下拉刷新
			onRefresh(tabIndex) {
				this.refreshing[tabIndex] = true;
				this.tabs[tabIndex].page_index = 1;
				this.noMoreData[tabIndex] = false;

				const typeMap = ['news', 'notice', 'activity'];

				setTimeout(() => {
					this.getData(this.keytext, typeMap[tabIndex], 1);
					this.refreshing[tabIndex] = false;
				}, 1000);
			},

			// 跳转详情页
			goToDetail(type, item) {
				// 根据类型跳转到对应的详情页
				let url = '';
                console.log(type,item);
				switch(type) {
					case 'news':
						url = `/pages/news/newsDetail?id=${item.id}`;
						break;
					case 'notice':
						url = `/pages/notice/detail?id=${item.id}`;
						break;
					case 'activity':
						url = `/pages/activity/detail?id=${item.id}`;
						break;
				}

				if (url) {
					uni.navigateTo({
                         url:url ,
                         fail:function(err){
                            console.log(err);
                         }
                        });
				}
			},

			// 格式化时间
			formatTime(time) {
				if (!time) return '';

				const date = new Date(time);
				const now = new Date();
				const diff = now - date;

				// 一天内显示时分
				if (diff < 24 * 60 * 60 * 1000) {
					return date.toTimeString().slice(0, 5);
				}

				// 一年内显示月日
				if (date.getFullYear() === now.getFullYear()) {
					return `${date.getMonth() + 1}-${date.getDate()}`;
				}

				// 超过一年显示年月日
				return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
			},

			// 设置swiper高度
			setSwiperHeight() {
				const systemInfo = uni.getSystemInfoSync();
				// 计算可用高度：屏幕高度 - 状态栏 - 导航栏 - 搜索框 - 标签栏
				this.swiperHeight = systemInfo.windowHeight - 200;
			}
		}
	}
</script>

<style scoped>
	.search-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 搜索头部 */
	.search-header {
		position: sticky;
		top: 0;
		z-index: 100;
		padding: 20rpx 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.search-wrapper {
		border-radius: 50rpx;
		overflow: hidden;
	}

	/* 搜索统计 */
	.search-stats {
		padding: 20rpx 30rpx 10rpx;
		background-color: #f5f5f5;
	}

	.stats-text {
		font-size: 28rpx;
		color: #666;
	}

	/* 导航包装器 */
	.nav-wrapper {
		background-color: white;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	/* 内容区域 */
	.content-wrapper {
		flex: 1;
		background-color: white;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
	}

	.tab-swiper {
		width: 100%;
	}

	.swiper-item {
		height: 100%;
	}

	.scroll-content {
		height: 100%;
	}

	.list-container {
		padding: 0 30rpx;
	}

	/* 列表项样式 */
	.news-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		transition: background-color 0.3s;
	}

	.news-item:active {
		background-color: #f8f8f8;
	}

	.news-item:last-child {
		border-bottom: none;
	}

	.item-content {
		flex: 1;
		min-width: 0;
	}

	.item-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		line-height: 1.4;
		margin-bottom: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.item-meta {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;

        justify-content: space-between;
	}

	.meta-tag {
		font-size: 22rpx;
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
		color: white;
		margin-right: 15rpx;
	}

	.news-tag {
		background-color: #3291d9;
	}

	.notice-tag {
		background-color: #F68512;
	}

	.activity-tag {
		background-color: #00baad;
	}

	.meta-time {
		font-size: 24rpx;
		color: #999;
	}

	.meta-category {
		font-size: 22rpx;
		color: #3291d9;
		background-color: #f0f8ff;
		padding: 2rpx 8rpx;
		border-radius: 8rpx;
		border: 1rpx solid #3291d9;
	}

	.item-summary {
		font-size: 28rpx;
		color: #666;
		line-height: 1.4;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.item-arrow {
		margin-left: 20rpx;
		color: #ccc;
	}

	.arrow-icon {
		font-size: 36rpx;
		font-weight: bold;
	}

	/* 加载状态 */
	.load-status {
		padding: 40rpx 0;
		text-align: center;
	}

	.loading-more {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.loading-text {
		font-size: 28rpx;
		color: #999;
	}

	.no-more {
		padding: 20rpx 0;
	}

	.no-more-text {
		font-size: 26rpx;
		color: #ccc;
	}

	/* 空状态 */
	.empty-state {
		text-align: center;
		padding: 100rpx 0;
	}

	.empty-icon {
		font-size: 120rpx;
		margin-bottom: 30rpx;
	}

	.empty-text {
		font-size: 30rpx;
		color: #999;
	}

	/* 全局加载 */
	.global-loading {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(0, 0, 0, 0.7);
		color: white;
		padding: 40rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 1000;
	}

	.loading-spinner {
		width: 60rpx;
		height: 60rpx;
		border: 4rpx solid rgba(255, 255, 255, 0.3);
		border-top: 4rpx solid white;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 20rpx;
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	/* 特殊项目样式 */
	.notice-item .item-title {
		color: #F68512;
	}

	.activity-item .item-title {
		color: #00baad;
	}
</style>
